<template>
  <div class="w-full bg-bgColorDeepBlue text-white overflow-hidden pt-16">
    <div class="flex flex-col md:flex-row md:w-[1440px] m-auto justify-center">
      <!-- 左边 - Share your Case -->
      <div class="w-[300px] md:w-[300px] border-r border-r-syGreyBg mr-[50px]">
        <h2 class="text-[30px] font-bold mb-6">Share your Case</h2>
        <button class="text-[18px] bg-bgColorBlue text-white py-3 px-6 rounded-full w-full md:w-[200px] transition-all">
          Publish a case
        </button>
      </div>

      <!-- 中间 - Join the Community -->
      <div class="w-[400px] md:w-[400px] border-r border-r-syGreyBg mr-[50px]">
        <h2 class="text-[30px] font-bold mb-6">Join the Community</h2>
        <div class="mb-4 mr-[50px]">
          <a-input :style="{width:'320px'}" size="large" placeholder="Email" allow-clear />
        </div>
        <button class="text-[18px] bg-bgColorBlue text-white py-2 px-8 rounded-full transition-all">
          SUBMIT
        </button>
      </div>

      <!-- 右边 - Logo和描述 -->
      <div class="w-[400px] md:w-[400px] px-4 md:px-0">
        <div class="mb-8">
          <img src="@/assets/images/logo-img.png" class="h-[60px]">
        </div>
        <p class="text-sm text-gray-300 leading-relaxed">
          is produced by the Cardiovascular Research Foundation® (CRF). CRF® is committed to igniting the next wave of
          innovation in research and education that will help doctors save and improve the quality of their patients' lives. For
          more information, visit http://www.crf.org.
        </p>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bg-bgColorDarkBlue mt-12 py-6 m-auto">  
      <div class="md:w-[1200px] m-auto flex flex-col md:flex-row justify-between items-center">
        <!-- 导航链接 -->
        <div class="flex space-x-16 mb-6 md:mb-0 text-[16px]">
          <a class="text-white hover:text-gray-300 transition-all">NEWS</a>
          <a class="text-white hover:text-gray-300 transition-all">EVENTS</a>
          <a class="text-white hover:text-gray-300 transition-all">CASES</a>
          <a class="text-white hover:text-gray-300 transition-all">FORUMS</a>
          <a class="text-white hover:text-gray-300 transition-all">USER CENTER</a>
          <a class="text-white hover:text-gray-300 transition-all">CONTACT US</a>
        </div>

        <!-- 社交媒体图标 -->
        <div class="flex space-x-4">
          <a class="text-white hover:text-gray-300 transition-all">
            <img src="@/assets/images/in.png" class="h-[30px]">
          </a>
          <a class="text-white hover:text-gray-300 transition-all">
            <img src="@/assets/images/instagram.png" class="h-[30px]">
          </a>
          <a class="text-white hover:text-gray-300 transition-all">
            <img src="@/assets/images/youtube.png" class="h-[30px]">
          </a>
          <a href="#" class="text-white hover:text-gray-300 transition-all">
            <img src="@/assets/images/facebook.png" class="h-[30px]">
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
</style>
